<template>
  <div>
    <div class="search-con search-con-top">
      <div class="fl">
        <Select v-model="condition.bid" clearable placeholder="请选择商家" class="search-col" @on-change="change3" style="width:200px">
          <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
        </Select>
        <Input clearable placeholder="输入点金券名称搜索" class="search-input" v-model="condition.name"/>
        <Button class="search-btn" type="primary" @click="List">搜索</Button>
      </div>
      <div class="fr">
        <Button class="search-btn" type="primary" @click="vivisle=true;status=true">新增点金券</Button>
      </div>
    </div>
    <tables ref="tables" editable :border="true" v-model="tableData" :columns="columns" :page="page" @pageSize="pageSize" @pageNum="pageNum"/>
    <Modal
        title="点金券管理"
        v-model="vivisle"
        :scrollable="false"
        :closable="true"
        :mask-closable="true"
        @on-cancel="handleReset('tableItem')"
        class-name="vertical-center-modal">
        <Form ref="tableItem" :model="tableItem" :rules="ruleValidate" :label-width="80">
          <FormItem label="名称" prop="name">
            <Input v-model="tableItem.name" placeholder="请输入姓名"></Input>
          </FormItem>
          <FormItem label="金额" prop="money">
            <Input v-model="tableItem.money" placeholder="请输入金额"></Input>
          </FormItem>
          <FormItem label="发行时间" prop="createtm">
             <DatePicker  :value="tableItem.createtm" @on-change="timeChange" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择发行时间" style="width: 200px"></DatePicker>
          </FormItem>
          <FormItem label="发行张数" prop="count">
            <Input v-model="tableItem.count" placeholder="请输入发行张数"></Input>
          </FormItem>
          <FormItem label="剩余张数" prop="store">
            <Input v-model="tableItem.store" placeholder="请输入剩余张数"></Input>
          </FormItem>
          <!-- <FormItem label="商家" prop="bid">
            <Select v-model="tableItem.bid" clearable :label-in-value="true" placeholder="请选择商家" size="large" style="width:200px" @on-change="change03">
                <Option v-for="item in businessList" :value="item.bid" :key="item.bid">{{ item.name }}</Option>
            </Select>
          </FormItem> -->
          <FormItem label="状态">
              <i-switch size="large" :value="status"  @on-change="changestatus"/>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="handleReset('tableItem')">取消</Button>
        <Button type="primary" size="large" @click="Save('tableItem')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import Tables from "_c/tables";
import { couponD, couponS, couponL,businessB} from "@/api/data";
export default {
  name: "Account",
  components: {
    tables: Tables
  },
  data() {
    return {
      status: false,
      vivisle: false,
      // id
      itemId: "",
      // 详情
      tableItem: {
      },
      // 条件
      condition: {
        pageNum: 1,
        pageSize: 10
      },
      businessList: [],
      // table表头
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
          key: ""
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "金额",
          key: "money",
        },
        {
          title: "剩余张数",
          key: "store",
        },
        {
          title: "发行时间",
          key: "createtm",
        },
        {
          title: "状态",
          key: "status",
        },
        {
          title: '操作',
          key: 'handle',
          button: [
            (h, params, vm) => {
              return [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px",
                      marginBottom: "5px"
                    },
                    on: {
                      click: () => {
                        this.itemId = params.row.cid;
                        var obj = params.row
                        for(var key in obj){
                          this.tableItem[key] = obj[key]
                        }
                        this.tableItem.count = this.tableItem.count.toString()
                        this.tableItem.money = this.tableItem.money.toString()
                        this.tableItem.store = this.tableItem.store.toString()
                        this.$set(this,'status',params.row.status=='可用' ? true : false)
                        this.Query(this.tableItem);
                      }
                    }
                  },
                  "编辑"
                )
              ];
            },
            (h, params, vm) => {
              return h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗?"
                  },
                  on: {
                    "on-ok": () => {
                      this.itemId = params.row.cid;
                      this.Delete();
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      },
                      style: {
                        marginRight: "5px",
                      marginBottom: "5px"
                      }
                    },
                    "删除"
                  )
                ]
              );
            }
          ]
        }
      ],
      // table数据
      tableData: [],
      // 分页数据
      page: {
        current: 1,
        total: 0,
        pageSize: 10
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ],
        money: [
          {
            required: true,
            message: "金额不能为空",
            trigger: "blur"
          }
        ],
        count: [
          {
            required: true,
            message: "发行张数不能为空",
            trigger: "blur"
          }
        ],
        store: [
          {
            required: true,
            message: "剩余张数不能为空",
            trigger: "blur"
          }
        ],
        // createtm: [
        //   {
        //     required: true,
        //     message: "发行时间不能为空",
        //     trigger: "change"
        //   }
        // ],
        // bid: [
        //   {
        //     required: true,
        //     message: "请选择发行商家",
        //     trigger: "change"
        //   }
        // ]
      }
    };
  },
  mounted() {
    this.List();
    this.ListB();
  },
  methods: {
    fmt(timestamp) {
      var day = "",
          month = "",
          hours = "",
          minutes = "",
          s = "",
          d = new Date(timestamp);

      day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
      month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth()+1) : (d.getMonth()+1);
      hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
      minutes = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
      s = d.getMinutes() < 60 ? '0' + d.getSeconds() : d.getSeconds();
      var date = (d.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes+ ":" + s);
      return date
    },
    changestatus (status1) {
        // this.$Message.info('开关状态：' + status1);
        this.$set(this,'status',status1)
        // this.$Message.info('------------' + this.status);
    },
    handleReset (name) {
      this.vivisle = false
      this.$refs[name].resetFields();
      this.$set(this,'tableItem',{
        lid: ''
      })
      this.$set(this,'status',false)
    },
    timeChange(e){
      this.tableItem.createtm = e
    },
    pageSize(value) {
      this.condition.pageSize = value
      this.condition.pageNum = 1
      this.List()
    },
    pageNum(value) {
      this.condition.pageNum = value
      this.List()
    },
    change3 (item) {
      if(item){
        this.condition.bid = item
      }
    },
    change03 (item) {
      if(item&&item.value) {
        this.tableItem.bid = item.value
        this.tableItem.bname = item.label
      }
    },
    ListB() {
      var obj = {
        status: 1,
        category: 1
      }
      businessB(obj).then(res => {
        if (res.code==1) {
        this.businessList = res.data
        }
      });
    },
    // 分页数据获取
    List() {
      couponL(this.condition).then(res => {
        if (res.code==1) {
        let { data, total } = res.data;
        if(data&& data.length>0){
          data.forEach(ele => {
            ele.status = ele.status==1?'可用':'不可用'
            // ele.createtm = new Date(ele.createtm)
          });
          this.tableData = data;
        } else{
          this.tableData = []
        }
        this.page.total = total;
        }
      });
    },
    Query() {
      this.vivisle = true
    },
    Delete() {
      couponD({ id: this.itemId }).then(res => {
        if (res.code === 1) {
          this.itemId = "";
          this.List();
        }
      });
    },
    // 保存
    Save(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var obj = this.tableItem
          obj.status = this.status == true ? 1: 0
          obj.createtm = this.fmt(obj.createtm)
          couponS(obj).then(res => {
            if (res.code === 1) {
              this.vivisle = false
              this.handleReset(name)
              this.List();
            }
          });
        }
      });
    }
  }
};
</script>
